<template>
  <Modal v-model="visible" width="400">
    <p slot="header">
      <span>课程详情</span>
    </p>
    <div>
      <Card :bordered="false">
        <p>分类：{{ courseInfo.type }}</p>
        <p>班级：{{ courseInfo.class }}</p>
        <p>时间：{{ courseInfo.date }}</p>
        <p>教室：{{ courseInfo.classroom }}</p>
        <p>消课：{{ courseInfo.classTime }}课时</p>
        <p>状态：{{ courseInfo.status }}</p>
      </Card>
    </div>
    <div slot="footer" class="footer">
      <p>授课老师</p>
      <div class="teachers">
        <div class="teacher" v-for="teacher in teachers" :key="teacher.id">
          <img :src="teacher.img" alt="" />
          <p>{{ teacher.name }}</p>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      courseInfo: {
        type: '美术',
        class: '美术舞蹈班',
        date: '2020-07-13（周一） 15:00-17:00',
        classroom: '美术教室302',
        classTime: 1,
        status: '已完成'
      },
      teachers: [
        {
          id: 1,
          name: '王1老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 2,
          name: '王2老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 3,
          name: '3老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 4,
          name: '王4老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 2,
          name: '王2老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 3,
          name: '3老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 4,
          name: '王4老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 2,
          name: '王2老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 3,
          name: '3老师',
          img: 'http://lemonof.com/favicon.png'
        },
        {
          id: 4,
          name: '王4老师',
          img: 'http://lemonof.com/favicon.png'
        }
      ]
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    close () {
      this.visible = false
    }
  }
}
</script>

<style lang="less">
.footer {
  //   display: flex;
  //   flex-direction: column;
  text-align: left;

  .teachers {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    flex-wrap: wrap;

    .teacher {
      margin-top: 10px;
      margin-right: 10px;
    }

    img {
      width: 40px;
      height: 40px;
      border: 1px solid #eeeeee;
    }

    p {
      text-align: center;
    }
  }
}
</style>
